<template>
  <div>
    <div style="text-align: right">
      <el-date-picker
        v-model="timevalue"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
    </div>
    <el-table
      :data="getPerPageData()"
      stripe
      style="width: 100%"
      max-height="500"
    >
      <el-table-column prop="time" label="时间" fixed="left" width="180">
      </el-table-column>
      <el-table-column prop="command" label="类型"> </el-table-column>
      <el-table-column prop="address" label="名称"> </el-table-column>
      <el-table-column prop="address" label="描述"> </el-table-column>
      <el-table-column prop="address" label="操作"> </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="limit"
        layout="sizes, prev, pager, next"
        :total="0"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
const time = require("@/tool/time");
export default {
  data() {
    return {
      timevalue: "",
      tableData: [
        {
          time: "",
          command: "",
          address: "",
          pidaddress: "",
          pidfeedaddress: "",
          rate: "",
          outputrate: "",
          pidselect: "",
          pidfeed: "",
          transducerstatus: "",
          cflow: "",
          stemp: "",
          pressure: "",
          electricpower: "",
        },
      ],
      currentPage: 1,
      limit: 10,
    };
  },
  methods: {
    generateTableData() {
      let date = new Date().getTime() - 10000000000;
      let arr = [];
      for (let i = 0; i < 99; i++) {
        let time = new Date(date - parseInt(Math.random() * 100000)).format(
          "yyyy-MM-dd hh:mm:ss"
        );
        let command = 0;
        let order = 0;
        let pidaddress = 5556.9;
        let pidfeedaddress = 11.0;
        let rate = 21;
        let outputrate = 26;
        let pidselect = 25.2;
        let pidfeed = 25.7;
        let transducerstatus = 1;
        let cflow = (1000 + Math.random() * 1000).toFixed(1);
        let stemp = (Math.random() * 100).toFixed(1);
        let pressure = (0.6 + Math.random()).toFixed(4);
        let electricpower = (100 + Math.random() * 100).toFixed(4);
        arr.push({
          time,
          command,
          order,
          pidaddress,
          pidfeedaddress,
          rate,
          outputrate,
          pidselect,
          pidfeed,
          transducerstatus,
          cflow,
          stemp,
          pressure,
          electricpower,
        });
      }
      return arr;
    },
    getPerPageData() {
      // let limit = this.$data.limit;
      // let page = this.$data.currentPage;

      // return this.generateTableData()
      //   .filter((x) => {
      //     let date = time.parseDate(x.time, "yyyy-MM-dd hh:mm:ss");
      //     if (this.$data.timevalue) {
      //       if (
      //         this.$data.timevalue[0] < date &&
      //         date < this.$data.timevalue[1]
      //       )
      //         return x;
      //     } else {
      //       return x;
      //     }
      //   })
      //   .slice((page - 1) * limit, (page - 1) * limit + limit);
      return [];
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.$data.limit = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.$data.currentPage = val;
    },
  },
};
</script>

<style scoped>
.block {
  text-align: center;
}
</style>